<template>
	<view>
		<!-- 点击筛选弹出的底部弹出窗口 -->
		<u-popup :show="popShow" class="container">
			<scroll-view >
				<view class="header">
					全部筛选
					<u-icon class="icon" size="20" color="#000" name="close" @click="hideright"></u-icon>
				</view>
				<view class="pop_scroll">
					<view class="left-tabs">
						<view
						  v-for="(tab, index) in tabs"
						  :key="index"
						  class="tab-item"
						  :class="{ active: activeTab === index }"
						  @click="changeTab(index)"
						>
						  {{ tab }}
						</view>
					</view>
					
					<view class="allClass">
						<view v-for="(item, index) in classList" :key="index">
							<view class="classtext">{{item.name}}</view>
							<view class="class_box">
								<!-- 选中分类条件 -->
								<view v-for="(subItem, indexs) in item.child" :key="subItem.id" class="class_tag"
									:style="{'color':(subItem.current ? '#F86B2D':'#333'),'background':(subItem.current ? colors:''),'border-color':subItem.current ? colors:''}"
									@tap="setClass(item,subItem,index,indexs)">{{subItem.name}}</view>
								<view class="class_tag class_tag_gd" v-show="item.child.length>7" @tap="setClass(item,subItem,index,indexs)">更多<u-icon class="icon" size="15" name="arrow-down"></u-icon></view>
							</view>
						</view>
					</view>
				</view>
				
			</scroll-view>
			<view class="bottom_btn">
				<view class="reset bottom_btnView" @tap="onreset">清空选择</view>
				<view class="enter bottom_btnView" @tap="onenter">确定</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		mixins: [{
			methods: {
				setData: function(obj, callback) {
					let that = this;
					const handleData = (tepData, tepKey, afterKey) => {
						tepKey = tepKey.split('.');
						tepKey.forEach(item => {
							if (tepData[item] === null || tepData[item] === undefined) {
								let reg = /^[0-9]+$/;
								tepData[item] = reg.test(afterKey) ? [] : {};
								tepData = tepData[item];
							} else {
								tepData = tepData[item];
							}
						});
						return tepData;
					};
					const isFn = function(value) {
						return typeof value == 'function' || false;
					};
					Object.keys(obj).forEach(function(key) {
						let val = obj[key];
						key = key.replace(/\]/g, '').replace(/\[/g, '.');
						let front, after;
						let index_after = key.lastIndexOf('.');
						if (index_after != -1) {
							after = key.slice(index_after + 1);
							front = handleData(that, key.slice(0, index_after), after);
						} else {
							after = key;
							front = that;
						}
						if (front.$data && front.$data[after] === undefined) {
							Object.defineProperty(front, after, {
								get() {
									return front.$data[after];
								},
								set(newValue) {
									front.$data[after] = newValue;
									that.$forceUpdate();
								},
								enumerable: true,
								configurable: true
							});
							front[after] = val;
						} else {
							that.$set(front, after, val);
						}
					});
					isFn(callback) && this.$nextTick(callback);
				}
			}
		}],
		data() {
			return {

				// paramDict: {
				// 	minPrice: '0',
				// 	maxPrice: '0'
				// },
				colors: '#FFE4D9',
				tabs: ['性别', '年龄区间', '星座'],
				activeTab: 0,
				classList: [
					{
						name: '性别',
						id: 3,
						child: [{
							name: '男性',
							id: 10,
							current: true
						}, {
							name: '女性',
							id: 11,
							current: false
					
						}]
					},
					{
					name: '年龄区间',
					id: 1,
					child: [{
						name: '18~28岁',
						id: 10,
						current: true
					}, {
						name: '28~38岁',
						id: 11,
						current: false

					}, {
						name: '38~48岁',
						id: 12,
						current: false

					}, {
						name: '48~58岁',
						id: 13,
						current: false

					},]
				}, {
					name: '星座',
					id: 2,
					child: [{
							name: '水瓶座',
							id: 20,
							current: false
						}, {
							name: '双鱼座',
							id: 21,
							current: false
						}, {
							name: '白羊座',
							id: 22,
							current: false
						},
						{
							name: '金牛座',
							id: 23,
							current: false
						},
						{
							name: '双子座',
							id: 24,
							current: false
						},
						{
							name: '巨蟹座',
							id: 25,
							current: false
						},
						{
							name: '狮子座',
							id: 26,
							current: false
						},
						{
							name: '处女座',
							id: 27,
							current: false
						},
						// {
						// 	name: '天蝎座',
						// 	id: 28,
						// 	current: false
						// },
						// {
						// 	name: '天秤座',
						// 	id: 29,
						// 	current: false
						// },
						// {
						// 	name: '摩羯座',
						// 	id: 30,
						// 	current: false
						// },
						// {
						// 	name: '天秤座',
						// 	id: 31,
						// 	current: false
						// },
					]
				}],
			}
		},
		props: {
			// 是否单选
			isSingleSel: {
				type: Boolean
			},
			// 是否显示
			popShow: {
				type: Boolean,
				default: false,
			},

		},
		methods: {


			hideright() {
				this.$emit("hideClick");

			},

			setClass(item, subItem, index, indexs) { //选择条件

				// 单选 清除所有选中
				if (this.isSingleSel) {

					let data = this.classList;
					let count = 0;
					data.forEach(e => {

						if (count == index) {
							e.child.forEach(ele => {
								ele.current = false;
							});
						}

						count++;
					});


				}

				subItem.current = !subItem.current;
				console.log("选择1 = " + JSON.stringify(subItem));

				item.child[indexs] = subItem;
				let data = item;
				let newdata = 'classList[' + index + ']';
				this.setData({
					[newdata]: data
				});

				// 适配小程序
				this.$emit("change", this.classList);


			},

			onreset() { //重置筛选条件
				let data = this.classList;
				data.forEach(e => {
					e.child.forEach(ele => {
						ele.current = false;
					});
				});

				this.classList = data;
				this.paramDict = {};

				// 适配小程序
				this.$emit("change", this.classList);

			},

			onenter() { //确认筛选条件

				let select = []
				this.classList.forEach(e => {
					e.child.forEach(ele => {
						if (ele.current == true) {
							select.push(ele)
						}
					});
				})

				this.$emit("sureClick", this.paramDict, select)
				console.log('选中的项', JSON.stringify(select))
				console.log('价格参数项', JSON.stringify(this.paramDict))
			},
		}
	}
</script>

<style lang="scss">
	.mask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 800;
	}
	.container{
		display: flex;
	}
	/* 左侧标签样式 */
	.left-tabs {
	   width: 25%;
	   height: 100%;
	   background-color: #F7F7F7;
	   overflow-y: auto;
	}
	 
	.tab-item {
	   padding: 10px;
	   font-size: 16px;
	   cursor: pointer;
	}
	 
	.tab-item.active {
	   background-color: #fff;
	   color: #ff9800;
	   font-weight: bold;
	}
	/* 右侧弹出框 */
	.right_popup {
		width: 85%;
		height: 100%;
		position: fixed;
		right: 0;
		top: 0;
		background-color: #fff;
		z-index: 920;
		transition: all 0.3s;
	}

	.hide_popup {
		transition: all 0.3s;
		width: 85%;
		height: 100%;
		position: fixed;
		right: -100%;
		top: 0;
		z-index: 920;
		transition: all 0.3s;
		background-color: #fff;
	}
	.header{
		text-align: center;
		border-bottom: 1rpx solid #EDEFEE;
		padding: 20rpx 0;
		font-weight: bolder;
		position: relative;
		.icon{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
	}
	.pop_scroll {
		height: 1300rpx;
		display: flex;
		width: 100%;
		margin: 20rpx 0;
	}

	.top_price {
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		padding: 0 30rpx;
	}

	.top_priceText {
		flex: 1;
		text-align: left !important;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.input_box {
		padding: 0 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.input_boxText {
		color: #999;
	}

	.input_boxInput {
		flex: 1;
		max-width: 45%;
		height: 100%;
		background-color: #F7F7F7;
		border-radius: 40rpx;
		box-sizing: border-box;
		text-align: center;
		font-size: 24rpx;
	}

	.allClass {
		padding: 0 30rpx;
		width: 75%;
	}

	.allClass .classtext {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-top: 30rpx;
	}

	.allClass .class_box {
		overflow: hidden;
	}

	.class_box .class_tag {
		margin-top: 10px;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 30rpx;
		font-size: 26rpx;
		color: #333;
		// border: 1rpx solid #999;
		background-color: #F7F7F7;
		text-align: center;
		border-radius: 10rpx;
		float: left;
		margin-right: 20rpx;
	}
	.class_tag_gd{
		background: none!important;
		display: flex;
		align-items: center;
	}

	.bottom_btn {
		height: 10%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 30rpx;
		margin-bottom: 20rpx;
	}

	.bottom_btnView {
		width: 50%;
		height: 72rpx;
		line-height: 72rpx;
		background-color: #F86B2D;
		text-align: center;
		color: #fff;
	}

	.bottom_btn .reset {
		background-color: #fff;
		background-color: #ff9900;
		border-top-left-radius: 36rpx;
		border-bottom-left-radius: 36rpx;
	}
	.enter {
		border-top-right-radius: 36rpx;
		border-bottom-right-radius: 36rpx;
	}
</style>